<template>
  <view class="page">
    <view class="page-hd">
      <view class="search">
        <SearchBox :placeholder="$t('countTask.searchPlaceholder')" v-model="keyword"></SearchBox>
      </view>
      <view class="dropdown-area">
        <DropdownView v-model="dropdownVal" />
      </view>
    </view>

    <view class="page-bd">
      {{ formatData }}
      <!-- 盘点任务 -->
      <ListView :data="formatData" @operate="handleOperate" />
    </view>
  </view>
</template>

<script setup>
import SearchBox from '@/components/base-components/search-box/search-box.vue';
import DropdownView from '@/components/base-components/dropdown-view/dropdown-view.vue';
import ListView from '@/components/base-components/list-view/list-view.vue';
import data from "./assets/list-view.data.js";
import useFormatData from './hooks/useFormatData.ts';
import { onLoad } from '@dcloudio/uni-app';

const [formatData] = useFormatData(data, []);

const dropdownVal = reactive([{type: 3, data:['2022-06-06', '2024-06-07']}, {data: 2}, {data: 2}]);

function handleOperate(type, data) {
  console.log(type, data);
}
onLoad((options) => {
  console.log("🚀 ~ onLoad ~ options:", options)
  // 解析传递的参数

});

watch(() => dropdownVal, (val) => {
  console.log('@监听组件下拉框DropdownView', val);
}, {
  immediate: true,
  deep: true
}
)
</script>

<style scoped lang="scss">
@import "@/static/scss/theme.scss";
// $border-color: #E5E5EB;
// $theme-color: #1951FA;
// $error-color: #F53F3F;

.page {
  height: 100vh;
  background-color: #F4F8FB;

  &-hd {
    gap: 32rpx;
    background-color: #FEFEFF;

    .search {
      background-color: #F4F8FB;
      margin: 16rpx 32rpx;
    }

    .link {
      width: 144rpx;
      color: $theme-color;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 26rpx;
    }

    .icon-clock {
      flex-shrink: 0;
    }
  }

  &-bd {
    height: calc(100vh - 196rpx);
    padding: 16rpx 24rpx;
  }

  .navbar {
    height: 60rpx;
  }
}
</style>
